<div class="module-list container-fluid">

  <div class="row">
    <div class="list-toolbar col-xl-12">
      <div class="title">模块列表</div>
      <div class="filter">
        <form [formGroup]="queryForm" class="form-inline">
          <label for="disabled">状态</label>
          <select [(ngModel)]="queryModel.disabled" formControlName="disabled"
                  class="form-control form-control-sm" id="disabled" name="disabled">
            <option *ngFor="let entry of (statusMap | mapToArray)" value="{{entry.key}}">{{entry.value}}</option>
          </select>
          &nbsp;&nbsp;&nbsp;
          <label for="keywords">关键字</label>
          <input [(ngModel)]="queryModel.keywords" formControlName="keywords"
                 type="search" class="form-control form-control-sm" placeholder="" id="keywords" name="keywords">
        </form>
      </div>
      <div class="buttons">
        <button (click)="create()" type="button" class="btn btn-secondary btn-with-icon btn-sm">
          <i class="fa fa-plus-circle"></i>新建
        </button>
      </div>
    </div>
  </div>

  <div class="row">
    <table class="table table-bordered table-hover th-bolder">
      <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>是否启用</th>
        <th style="width: 250px;">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of models; let i = index;">
        <td>{{ i+1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ !item.disabled | trueOrFalse }}</td>
        <td>
          <span *ngIf="i == 0" class="ionic-icon link placeholder"></span>
          <span (click)="up(item)" *ngIf="i > 0" class="fa fa-arrow-up ionic-icon link"></span>

          <span (click)="down(item)" *ngIf="i < models.length - 1" class="fa fa-arrow-down ionic-icon link"></span>
          <span *ngIf="i == models.length - 1" class="ionic-icon link placeholder"></span>
          &nbsp;
          <span (click)="edit(item.id)" class="link no-underline">编辑</span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

</div>
